<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTitleText: "排行榜",
    navigationBarTextStyle: "white",
    // backgroundColorTop:"#00754A",
    // backgroundColorBottom:"#00754A",
    backgroundColor:"#00754A"
  },
}
</route>

<template>
  <view class="wrap">   
    <view class="main-box" :style="{ '--top': top + 'px' }">
      <view class="tabs-box flex">
        <view
          v-for="(item, index) in tabsList"
          :key="index"
          class="tab-item"
          :class="curIdx == index ? 'active' : ''"
          @click="clickHaler(index)"
        >
          {{ item }}
        </view>
      </view>
      <view class="rank-box">
          <DishesRank v-if="curIdx === 0"></DishesRank>
          <OrderingRank v-if="curIdx === 1"></OrderingRank>
          <HotRank v-if="curIdx === 2"></HotRank>
      </view> 
    </view>
  </view>
</template>

<script lang="ts" setup>
import DishesRank from "./components/dishesRank.vue";
import HotRank from "./components/hotRank.vue";
import OrderingRank from "./components/orderingRank.vue";

import { useUserStore } from "@/store";

const { top } = useUserStore().pinia_SafeVal;

const tabsList = ref(["菜品榜", "点菜榜", "食谱热度榜"]);

const curIdx = ref(0);
const clickHaler = (index) => {
  curIdx.value = index;
};
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: url(../../static/images/rankBg.png) ;
  background-size: 100% auto; /* 宽度填满，高度按比例缩放 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

.main-box {
  width: 100%;
  position: absolute;
  top: var(--top);
  box-sizing: border-box;
  height: calc(100% - var(--top));
  .tabs-box {
    padding: 6.5rpx 31rpx 0 31rpx;
    // align-items: center;
    height: 104rpx;
    box-sizing: border-box;
    .tab-item {
      font-size: 31rpx;
      color: #ffffff;
      line-height: 62rpx;
      &::after {
        content: "|";
        display: inline-block;
        line-height: 62rpx;
        margin: 0 20rpx;
        color: #ffffff4b;
      }
      &:last-child::after {
        content: none;
      }
    }

    .active {
      font-size: 38rpx;
      font-weight: 600;
    }
  }
}

.rank-box {
  height: calc(100% - 110rpx);
  overflow: hidden;
}
</style>

<style lang="scss">
page{
  background: #fff !important;
}
.content{
  height: 100%;
  padding: 31rpx;
  border-radius: 16rpx;
  background: #fff;
  box-sizing: border-box;
}
.title {
  font-weight: 600;
  font-size: 31rpx;
  color: #111111;
  line-height: 46rpx;
  height: 46rpx;
}

.sortBox {
  display: flex;
  margin: 21rpx 0;
  height: 38rpx;
  .sortItem {
    font-weight: 400;
    font-size: 23rpx;
    color: #595a5b;
    line-height: 38rpx;
    margin-right: 30rpx;
  }
  .act-sort {
    font-weight: 600;
    font-size: 27rpx;
    color: #00754a;
  }
}

.scrollBox{
  height: calc(100% - 46rpx - 80rpx);
  overflow-y: auto;
}

.rank-Bg {
  width: 62rpx;
  height: 62rpx;
  background-image: url("/static/images/rank4.png");
  background-size: 100% 100%;
  font-weight: bold;
  font-size: 29rpx;
  line-height: 62rpx;
  color: #ffffff;
  text-shadow: -1px -1px 0 #00754a, 1px -1px 0 #00754a, -1px 1px 0 #00754a,
    1px 1px 0 #00754a;
  text-align: center;
}
.rank-Idx {
  width: 62rpx;
  height: 62rpx;
  font-weight: bold;
  font-size: 29rpx;
  line-height: 62rpx;
  color: #ffffff;
  text-shadow: -1px -1px 0 #00754a, 1px -1px 0 #00754a, -1px 1px 0 #00754a,
    1px 1px 0 #00754a;
  text-align: center;
}

.rankItem {
  padding: 24rpx 0;
  border-bottom: 1px solid #ebedf0;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  &-ImgBox {
    margin: 0 16rpx;
  }

  &-Name {
    font-weight: 600;
    font-size: 31rpx;
    color: #111111;
    line-height: 46rpx;
  }
  &-sortName {
    font-weight: 400;
    font-size: 27rpx;
    color: #969799;
    line-height: 42rpx;
    margin-right: 10rpx;
  }

  &-sortNum {
    font-weight: 600;
    font-size: 31rpx;
    color: #00754a;
    line-height: 46rpx;
  }
}
</style>
